<template>
  <div :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme

export default {
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '430px'
    }
  },
  data() {
    return {
      chart: ''
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    init() {
      this.chart = echarts.init(this.$el, 'macarons')
      var option = {
        title: {
          text: 'Bar Charts'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          containLabel: true
        },

        legend: {
          data: ['销量', '生产1', '生产2']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar', // line
          stack: 'vistors',
          data: [5, 20, 36, 10, 10, 20]
        }, {
          name: '生产1',
          type: 'bar',
          // stack: 'vistors',
          data: [15, 20, 36, 10, 10, 20]
        }, {
          name: '生产2',
          type: 'bar',
          // stack: 'vistors',
          data: [5, 20, 36, 10, 10, 20]
        }]
      }
      this.chart.setOption(option)
    }
  }
}
</script>

<style>

</style>
